(function () {
    $.fn.extend({
        /**
         * 透明轮播
         */
        transparentPlay: function () {
            let playIndex = 0;//轮播下标
            const self = this;

            function autoPlay() {
                playIndex++;
                if (playIndex > 3) {
                    playIndex = 0;
                }
                $(self).find('.bannerList li').eq(playIndex).fadeIn(500)
                    .siblings().fadeOut(500);
                $(self).find('.btn-banner li').eq(playIndex).css('opacity', 1)
                    .siblings().css('opacity', 0.4);
            }

            //设置自动轮播
            self.timer = setInterval(autoPlay, 2000);

            //设置轮播的开始与结束
            self.on('mouseenter', function () {
                clearInterval(self.timer);
            }).on('mouseleave', function () {
                self.timer = setInterval(autoPlay, 2000);
            })

            //设置小按钮
            self.find('.btn-banner li').on('mouseenter', function () {
                playIndex = $(this).index() - 1;
                autoPlay();
            })
        },

        /**
         * tab栏切换
         */
        tabChange() {
            $(this).find('.tabTitle li').on('mouseenter', function () {
                const index = $(this).index();
                $(this).addClass('current')
                    .siblings().removeClass('current')
                    .parent().next().find('li').eq(index).css('display', 'flex')
                    .siblings().hide();
            });
        },

        /**
         * 加载楼层编号
         */
        loadFloorNum() {
            [...this].forEach(function (el, index) {
                $(el).css("background-position", `0px ${-26 * index}px`);
            });
        },

        /**
         * 盖楼层
         */
        floorChange() {
            const self = this;

            //滚动事件
            function navShow() {
                // 获取不可见区域的高度
                let domScrollTop = $(this).scrollTop();
                //获取每层楼距离浏览器顶部的高度
                let itemClientTop = [];
                [...$(self).find('.floor-item')].forEach(function (el) {
                    itemClientTop.push($(el).offset().top - domScrollTop);
                });
                //获取浏览器的高度
                let clientHeight = document.documentElement.clientHeight;
                //导航的显示与消失
                if (itemClientTop[0] <= clientHeight) {
                    $('.nav-floor-All').css({
                        transition: 'transform 0.3s ease',
                        transform: 'scale(1)'
                    });
                } else {
                    $('.nav-floor-All').css({transform: 'scale(0)'});
                    [...$('.nav-floor li')].forEach(function (el) {
                        $(el).css('background', "");
                    })
                }

                //到瀚蓝与滚动条的绑定
                itemClientTop.forEach(function (el, index) {
                    if (el <= clientHeight / 4 && el >= 0) {
                        $('.nav-floor li').eq(index).css('background', '#f60')
                            .siblings().css('background', "");
                    }
                });
            }

            navShow();//初始化
            $(document).on('scroll', navShow)

            //导航栏点击事件
            $('.nav-floor li').on('click', function () {
                $('html,body').stop().animate({
                    scrollTop: $(".floor-item").eq($(this).index()).offset().top - document.documentElement.clientHeight / 4 + 10
                }, 300);
            })
        },

        /**
         * 下拉菜单显示
         */
        listShow() {
            this.on('mouseenter', function () {
                let index = $(this).index();
                $('.classText').css('display', 'flex').find('li').eq(index).css('display', 'flex').siblings().hide();
                $(this).addClass('active').siblings().removeClass('active');
            })

            $(this).parents('.classAll').on('mouseleave', function () {
                $(this).find('.classText').hide();
                [...$('.classContent li')].forEach(function (el) {
                    $(el).removeClass('active');
                })
            })
        },

        /**
         * 显示登陆的用户名
         */
        showNickname() {
            const self = this;
            //判断用户是否已经登录
            if (localStorage.getItem("userInfo")) {
                //设置登录变化
                $(self).find('.selectLogin').hide()
                    .siblings('.selectExit').show();
                //设置欢迎标语
                let userObj = JSON.parse(localStorage.getItem('userInfo') || '{}');
                $(self).find('span').eq(0)
                    .html(`您好！欢迎 <i class="c-orange">${userObj.u_nickname}</i> 来到音平商城!`);
            } else {
                $(self).find('.selectLogin').show()
                    .siblings('.selectExit').hide();
                $(self).find('span').eq(0)
                    .text(`您好！欢迎来到音平商城!`);
            }

            //退出的点击事件
            $(self).find('.selectExit a').on('click', function () {
                localStorage.removeItem('userInfo');
                location.reload();
            })
        },

        /**
         * 主页商品渲染
         */
        renderIndex() {
            const self = this;
            $.ajax({
                url: './goods/seeAll',
                type: 'get'
            }).then(function (res) {
                if (res.status === 200) {
                    let goodsList = res.data;
                    console.log(goodsList);
                    let strHtml = ``
                    goodsList.forEach(function (el) {
                        strHtml += `<li>
                            <a href="detail.html?${el.g_id}" target="_blank">
                                <img src="${Array.from(JSON.parse(el.g_imgs))[0]}" alt="">
                                <p>${el.g_name}</p>
                                <p class="price">￥<em>${el.g_price}</em></p>
                            </a>
                        </li>`;
                    });
                    $(self).html(strHtml);
                }
            })
        }
    });
})()

$(function () {
    //透明轮播图效果
    $("article.banner").transparentPlay();

    //tab栏切换
    $('.tabAll').tabChange();

    //加载楼层编号
    $('.floor .floorNum').loadFloorNum();

    //盖楼层
    $('.floor').floorChange();

    //下拉菜单显示
    $('.classContent li').listShow();

    //显示登陆的用户名
    $('.h-t-left').showNickname();

    //主页商品渲染
    $('.goodList').renderIndex();
})